var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";

function gameLoop() {
	window.requestAnimationFrame(gameLoop);
	coin.update();
	coin.render();
	coin1.update();
	coin1.render();
}

// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);


//canvas.addEventListener("mousedown", tap);
//function tap(e){
//tapX=e.targetTouchese.targetTouches[0].pageX: e.pageX,
//tapY=e.targetTouches /*PUTSOMTHINGHERE*/ e.targetTouches[0].pageY: e.pageY,
//if tapX>=coin.xpos&&tapX<=coin.xpos+100){
//}

//FUNCTION SPRITE HERE
function sprite(options) {

	var that = {}, frameIndex = 0, tickCount = 0, ticksPerFrame = options.ticksPerFrame || 0,//tickperframe
	numberOfFrames = options.numberOfFrames || 1,
	x=options.x||0, y=options.y||0;
	
	
	

	that.context = options.context;
	that.width = options.width;
	that.height = options.height;
	that.image = options.image;

	that.loop = options.loop;

	that.update = function() {
		tickCount += 1;
		if (tickCount > ticksPerFrame) {//tickperframe
			tickCount = 0;
			// If the current frame index is in range
			if (frameIndex < numberOfFrames - 1) {

				// Go to the next frame
				frameIndex += 1;
			} else if (that.loop) {
				frameIndex = 0;

			} else if ( frameIndex = 0)
			
				;else if(frameIndex=0||framIndex!=0){}
		}
	};
	


	that.render = function() {

		// Clear the canvas
		that.context.clearRect(x, y, that.width, that.height);

		// Draw the animation
		that.context.drawImage(that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, x, y, that.width / numberOfFrames, that.height);

		

	};
	

	return that;
	
}
//END HERE!!!



var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;


var coin = sprite({
	context : canvas.getContext("2d"),
	width : 1000,
	height : 1000,
	image : coinImage,
	numberOfFrames : 10,
	ticksPerFrame : 60,
	x:Math.random()*500,
	y:Math.random()*500

});
var coin1 = sprite({
	context : canvas.getContext("2d"),
	width : 1000,
	height : 1000,
	image : coinImage,
	numberOfFrames : 10,
	ticksPerFrame : .51,
	x:Math.random()*500,
	y:Math.random()*500

});

